<template>
  <tab-content-loading style="padding-top: 30px;" v-if="!list"/>
  <van-pull-refresh v-pull-down-container-height="!isPullRefreshLoading || !isMoreLoading" v-else
                    v-model="isPullRefreshLoading" @refresh="onRefresh">
    <van-list
      :style="{opacity: isMoreVisible ? 1:0}"
      :error.sync="isMoreError"
      v-model="isMoreLoading"
      :finished="isMoreFinished"
      finished-text="没有更多了"
      @load="onLoadMore"
    >
      <ul class="order-list-main">
        <router-link tag="li" :to="{path:'/ordershow',query:{id:item.orderId}}" :key="item.orderId"
                     v-for="(item,itemIndex) in list">
          <p class="status">{{item.statusName}}</p>
          <div :key="index" v-for="(goods,index) in item.productList" class="content">
            <div class="icon-wrap">
              <img v-lazy="goods.frontPicUrl" alt="">
            </div>
            <div class="details">
              <div class="attr-detail">
                <p class="name">{{goods.productName}}</p>
                <p class="specs">{{goods.className}}</p>
                <!--            <p class="tag">七天退换</p>-->
              </div>
              <div class="num">
                <p>&#165;{{goods.price}}</p>
                <p>x{{goods.buyNums}}</p>
              </div>
            </div>
          </div>
          <div class="total">
            <p class="quantity">共{{item.orderCount}}件商品</p>
            <p class="price-info">合计：&#165; <span class="size">{{item.totalAmt}}</span>（含运费：&#165;<span
              class="size">{{item.shipFee}}</span>)</p>
          </div>
          <div class="btn-group">
            <template v-if="item.orderStatus===0">
              <div @click.stop="cancelOrder(item,itemIndex)" class="btn gray-btn">取消订单</div>
              <div @click.stop="goPay(item,itemIndex)" class="btn">去支付</div>
            </template>
            <template v-else-if="item.orderStatus===2">
              <div @click.stop="$router.push({path:'/physical',query:{id:item.orderId}})" class="btn gray-btn">查看物流
              </div>
              <div @click.stop="upDateFinishTime(item,itemIndex)" class="btn">确认收货</div>
            </template>
            <template v-else-if="item.orderStatus===3">
<!--              <div @click.stop="$router.push({path:'/ferund',query:{id:item.orderId}})" class="btn gray-btn">申请退款</div>-->
              <div @click.stop="$router.push({path:'/ordermsg',query:{id:item.orderId}})" class="btn">去评价</div>
            </template>
            <template v-else-if="item.orderStatus===4">
              <div @click.stop="$router.push({path:'/ordershowmsg',query:{id:item.orderId}})" class="btn gray-btn">查看评价</div>
              <!--<div @click.stop="cancelRefund(item,itemIndex)" class="btn">取消退款</div>-->
            </template>
          </div>
        </router-link>
      </ul>
    </van-list>
    <payment :show.sync="payOptions.show" :id="payOptions.orderId" v-if="payOptions.show"
             @zf="paySuccessHandle"></payment>
  </van-pull-refresh>
</template>
<script>
  import TabContentLoading from "./Tab.Content.Loading";
  import {pullRefresh, loadMore} from '../mixins/pull.refresh'

  export default {
    name: 'OrderList',
    mixins: [pullRefresh, loadMore],
    components: {TabContentLoading},
    props: {
      status: {
        type: [String, Number],
      }
    },
    data() {
      return {
        list: null,
        payOptions: {
          show: false,
          index: -1,
          orderId: ''
        }
      }
    },
    methods: {
      // 支付成功
      paySuccessHandle() {
        this.updateOrderId({},  this.payOptions.index)
      },
      // goPay
      goPay(item, index) {
        this.payOptions = {
          show: true,
          index: index,
          orderId: item.orderId
        }
      },
      // 加载更多
      onLoadFetch() {
        debugger;
        this.fetchPage();
      },
      // init
      fetchPage() {
        this.$ajax.getOrderByMemberId({
          ...this.pagination,
          orderStatus: this.status
        }).then(
          res => {
            this.list = this.getLoadMoreListConcat(res.data.orderList, this.list);
            this.$nextTick(() => {
              this.pullRefreshSuccess();
              this.loadMoreSuccess({total: res.data.total, length: this.list.length});
            })
          },
          err => {
            this.loadMoreFail();
            this.pullRefreshFail();
          }
        )
      },
      //cancelOrder
      cancelOrder(item, index) {
        this.$dialog.confirm({
          message: '确认取消订单吗？'
        }).then(() => {
          this.$loading.open();
          this.$ajax.cancelOrder({orderId: item.orderId}).then(res => {
            this.$loading.close();
            this.$toast({message: '取消成功', duration: 800, type: 'success'});
            this.updateOrderId(item, index)
          })
        }).catch(() => {

        });
      },
      // cancelRefund
      cancelRefund(item, index) {
        this.$loading.open();
        this.$ajax.cancelRefund({orderId: item.orderId}).then(res => {
          this.$loading.close();
          this.$toast({message: '取消成功', duration: 800, type: 'success'});
          this.updateOrderId(item, index)
        })
      },
      // upDateFinishTime
      upDateFinishTime(item, index) {
        this.$loading.open();
        this.$ajax.upDateFinishTime({orderId: item.orderId}).then(res => {
          this.$loading.close();
          this.$toast({message: '确认成功', duration: 800, type: 'success'});
          this.updateOrderId(item, index)
        })
      },
      updateOrderId(item, index) {
        this.$ajax.getOrderByMemberId({
          ...this.pagination,
          orderStatus: this.status
        }).then(
          res => {
            this.list.splice(index, 1);
          }
        )
      }
    },
    mounted() {
      this.fetchPage();
    }
  }
</script>
<style lang="scss">
  @import "../assets/css/_utils.scss";

  .order-list-main {
    background-color: #fffaf8;


    .list-container {
      overflow: auto;
    }

    li {
      margin: 20px;
      padding: 30px;
      min-height: 437px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin-bottom: 30px;
      background-color: #fff;
    }

    .status {
      text-align: right;
      font-size: 30px;
      color: #fe7537;
      padding-bottom: 20px;
    }

    .content {
      display: flex;

      .icon-wrap {
        width: 140px;
        height: 200px;

        img {
          margin: 0 auto;
          display: block;
        }
      }

      .details {
        padding-left: 30px;
        display: flex;
        flex: 1;
        height: 200px;

        .attr-detail {
          padding-right: 30px;
          flex: 1;
        }

        .num {
          font-size: 30px;
          color: #2e2e2e;
          text-align: right;

          p {
            padding-bottom: 14px;
          }
        }
      }

      .name {
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        word-break: break-all;
        word-wrap: break-word;
        white-space: pre-wrap;
        font-size: 30px;
        color: #2e2e2e;
        margin-bottom: 12px;
      }

      .specs {
        font-size: 24px;
        color: #c1c4c9;
        margin-bottom: 10px;
      }

      .tag {
        width: 120px;
        height: 36px;
        background-color: rgba(207, 207, 73, 0.05);
        border-radius: 10px;
        font-size: 24px;
        color: #fe7537;
      }
    }

    .total {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 20px;

      .quantity {
        font-size: 30px;
        color: #2e2e2e;
      }

      .price-info {
        font-size: 24px;
        color: #2e2e2e;
        display: flex;
        align-items: center;

        .size {
          font-size: 36px;
        }
      }
    }

    .btn-group {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      margin-left: 30px;

      .btn {
        padding: 6px 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        background-color: #fb4f54;
        border-radius: 10px;
        color: #ffffff;
        margin-left: 30px;
      }

      .gray-btn {
        background-color: #fff;
        border: solid 1px #c1c4c9;
        color: #c1c4c9;
      }
    }
  }
</style>
